$(function() {
    // 生成文本框
    initEditor();
    // 获取状态列表数据赋值给下拉框
    // 初始化图片插件
    
    $.ajax({
        type: "get",
        url: "/my/article/cates",
        success: function (res) {
          // console.log(res);
            if (res.status!=0) return layui.layer.msg(res.message);
            layui.layer.msg(res.message);
            var htmlstr=template('tpl-cate',res);
            $('[name=cate_id]').html(htmlstr);
            layui.form.render();
        }
    });
    // 1. 初始化图片裁剪器
  var $image = $('#image')
  
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  
  // 3. 初始化裁剪区域
  $image.cropper(options)
    // 图片处理点击选着封面让filter自动点击一下
    $('#btnChooseImage').on('click', function() {
        $('#coverFile').click()
      });


    //   监听上传文件按钮的改变 用插件中的图片裁剪处理图片
      $('#coverFile').on('change',function (e) { 
        var files = e.target.files;
        // 判断有没有tupian
        if (files.length==0 ) {
            return;
        }
        var file = e.target.files[0];
        var newImgURL = URL.createObjectURL(file);
        $image
       .cropper('destroy')      // 销毁旧的裁剪区域
       .attr('src', newImgURL)  // 重新设置图片路径
       .cropper(options)        // 重新初始化裁剪区域
      });
    //   改变状态
      var art_state = '已发布';
      $('#btnSave2').on('click', function(){
          art_state = '草稿';
      })



    //   给from表单绑定submit事件
      $('#form-pub').on('submit', function(e){
        e.preventDefault();
        // console.log(11);
        // 收集数据 用formData快速收集数据 但是formData只能用用提交数据 post
        var fd=new FormData($(this)[0]);
        // 将状态添加到fm里
        fd.append('state',art_state);
        $image
        .cropper('getCroppedCanvas', {
          // 创建一个 Canvas 画布
          width: 400,
          height: 280
        })
        .toBlob(function(blob) {
          // 将 Canvas 画布上的内容，转化为文件对象
          // 得到文件对象后，进行后续的操作
          // 5. 将文件对象，存储到 fd 中
          // console.log(blob);
          fd.append('cover_img', blob);
          // console.dir(fd);
          publishArticle(fd);
         
          
        })
         // console.dir(fd);
          

      })
      function publishArticle(fd){
        console.log(22222);
        // 发送Ajax请求
        $.ajax({
          type: "post",
          url: "/my/article/add",
          data: fd,
          // formData格式有两个参数
          contentType:false,
          processData:false,
          success: function (res) {
            // console.log(res);
            if (res.status!=0) return layui.layer.msg(res.message);
            layui.layer.msg(res.message);
            // 强制跳转页面
          //  location.href='../../article/article-list.html';
          }
        });
      }
})